<script setup>
import { watch, computed, ref } from "vue";
import { useRoute } from "vue-router";
import { searchSend, brandSend } from "@/api/search";
import { headNavSend } from "@/api/home";
import goodsBox from "@/components/goods/goodBox.vue";
import router from "@/route";
const route = useRoute();
const headData = ref([]);
const brandData = ref([]);
const searchData = ref('');
const search = async (name) => {
  const data = await searchSend({
    keyword: name,
    page: 1,
  });
  searchData.value = data.result;
};
const headNav = async () => {
  const data = await headNavSend();
  headData.value = data.result;
  console.log(data);
};

const brand = async () => {
  const data = await brandSend();
  brandData.value = data.result;
};

headNav();
brand();
search(route.params.name);

watch(route, (name, prevCount) => {
  search(name.params.name);
});

const toPath = () => {
  router.push(`/search/${route.params.name}/details`)
}
</script>

<template>
  <div class="search-goods" v-if="searchData?.pageData?.counts">
    <div class="search-nav">
      <div>
        <span> 分类： </span>
        <span> 全部 </span>
        <span v-for="item in headData" :key="item">
          {{ item.name }}
        </span>
      </div>

      <div>
        <span> 品牌： </span>
        <span> 全部 </span>
        <template v-for="item in brandData" :key="item.firstWord">
          <span v-for="tag in item.brands" :key="tag.id"> {{ tag.name }} </span>
        </template>
      </div>
    </div>

    <div class="search-content">
      <div class="search-content-nav">
        <span style="background-color: #1abc9c; color: #fff">最新商品</span>
        <span>最高人气</span>
        <span>评论最多</span>
        <span>价格排序</span>
      </div>
      <div class="search-content-items">

        <goods-box
          class="home-goods-item"
          v-for="item in searchData?.pageData?.items"
          :key="item"
          @click="toPath"
        >
         <img :src="item.picture" alt="" />
              <div class="fresh-goods-text home-goods-text">
                <div class="home-goods-text-title">{{ item.name }}</div>
                <p style="color: #aaa">{{ item.desc }}</p>
                <p style="color: #e36844">{{ "¥" + item.price }}</p>
              </div>
        </goods-box>
      </div>
    </div>
  </div>
  <div class="search-goods" v-else>
    <div class="search-content">
       <p class="null">抱歉，没有搜索到与 {{ route.params.name }} 相关的商品</p>
    </div>
  </div>
</template>

<style lang="scss">
.search-goods {
  width: 80%;
  margin: 0 auto;
  .search-nav {
    margin: 20px 0;
    padding: 15px 50px;
    border: 1px solid #ddd;
    background-color: #fff;

    div {
      padding: 15px 0;

      &:nth-of-type(1) {
        border-bottom: 1px solid #eee;
      }

      span {
        &:nth-of-type(2) {
          color: #1abc9c;
        }

        & ~ span {
          margin-right: 15px;
        }
      }
    }
  }

  .search-content {
    margin: 20px 0;
    background-color: #fff;
    padding: 20px 40px;

    .search-content-nav {
      font-size: 14px;
      margin-bottom: 30px;

      span {
        padding: 10px;
        // background-color: ;
        border: 1px solid #eee;
        margin-right: 15px;
        color: #bbb;
      }
    }

    .search-content-items{

      //  display: flex;
      //   justify-content: space-between;
      //   flex-wrap: wrap;

      display: grid;
      grid-template-columns: repeat(4, calc( (100% - 20px * 3) / 4) );
      gap: 20px;

    }

    .home-goods-item {
      
      display: inline-block;
          // width: calc((100% - 8%) / 4);
          // width: ;

          img {
            width: 100%;
          }

          transition: all 0.5s;
          box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.1),
            0 6px 20px 0 rgba(0, 0, 0, 0.1);
          &:hover {
            box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2),
              0 6px 20px 0 rgba(0, 0, 0, 0.19);
            transform: scale(1.05, 1.05);
          }

          .home-goods-text {
            width: 100%;
            text-align: center;
            background-color: #f0f9f4;
            .home-goods-text-title {
              white-space: nowrap;
              overflow: hidden;
              text-overflow: ellipsis;
              color: #333;
              font-size: 16px;
              padding: 5px 20px;
            }
            p {
              padding: 5px 0;
              white-space: nowrap;
              overflow: hidden;
              text-overflow: ellipsis;
            }
          }
      
      }
  }

  .null{
    height: 500px;
    text-align: center;
    line-height: 500px;
    font-size: 20px;
  }
}
</style>
